"use client";

import { useEffect, useRef, useState } from "react";
import { Button, Input } from "antd";
import { SessionContext } from "./session";
import Child01 from "./child01";
import StackedChart from "./chart";
import url from "./work";

export default function Home() {
  const [content, setContent] = useState("无");
  const inputContent = useRef<HTMLInputElement>(null);

  function onClick() {
    if (inputContent.current) {
      setContent(inputContent.current.value);
    }
  }

  const defaultContent = {
    content: content,
  };

  const App = () => {
    const [result, setData] = useState(null);
    const worker = new Worker(url);

    worker.postMessage({ data: "from main" });
    worker.onmessage = (ev) => {
      const data = ev.data;
      console.log(data);
      setData(data);
    };

    useEffect(() => {
      result && worker.terminate();
      result && console.log("close work.");
    }, [result]);

    const data = [
      { key: "Jan", "Series 1": 120, "Series 2": 200 },
      { key: "Feb", "Series 1": 200, "Series 2": 240 },
      // 更多数据...
    ];
    const legend = ["Series 1", "Series 2"];

    return <StackedChart data={data} legend={legend} />;
  };

  return (
    <SessionContext.Provider value={defaultContent}>
      <div className="flex min-h-screen flex-col items-center justify-between p-24">
        <div className="flex flex-row items-center justify-between space-x-10">
          <label>{content}</label>
          <label htmlFor="1">输入内容：</label>
          <input
            id="1"
            type="text"
            maxLength={10}
            size={10}
            ref={inputContent}
          />{" "}
          <Button onClick={onClick}>确定</Button>
        </div>
        <Child01 />
        <App />
      </div>
    </SessionContext.Provider>
  );
}
